<h1 mat-dialog-title>{{"Found"| translate}} {{data.users.length}} {{"Users"| translate}}</h1>

<div style="height: 110px;display:block;overflow:hidden;">
  <div *ngIf="data.users.length < 4">
    <div>
      <label>{{'Choose a User'| translate}}: </label>
    </div>
    <mat-radio-group required [formControl]="UserSelectControl" [(ngModel)]="selected">
      <mat-radio-button *ngFor="let u of data.users" value="{{u.id}}"
                        style="padding-right: 10px">{{u.name}}</mat-radio-button>
    </mat-radio-group>
  </div>

  <div *ngIf="data.users.length >= 4">
    <mat-form-field style="width: 100%" >
      <mat-select [(value)]="selected"
                  [compareWith]="compareFn"
                  [formControl]="UserSelectControl"
                  placeholder="{{'Choose a User'| translate}}" required>
        <mat-option *ngFor="let u of data.users" value="{{u.id}}">{{u.name}}</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  <mat-error *ngIf="UserSelectControl.hasError('required')">{{"Please choose a User"| translate}}</mat-error>

</div>

<div style="float: right">
  <button mat-raised-button (click)="onNoClick()">{{"Cancel"| translate}}</button>
  <button mat-raised-button color="primary" [mat-dialog-close]="selected" cdkFocusInitial>{{"Confirm"| translate}}</button>
</div>
